<!-- 修改用户角色 -->
<template>
  <div class="role-modify">
    <!-- 编辑用户角色 -->
    <div class="modify-icon">
      <i class="iconfont">&#xe62e;</i>
      <span>用户角色编辑</span>
      <p class="modify-p">{{this.name}}的基本信息</p>
    </div>
    <!-- 基本信息 -->
    <div class="modify-basic">
      <el-form
        :model="dynamicValidateForm"
        ref="dynamicValidateForm"
        label-width="100px"
        class="demo-dynamic"
        status-icon
        :rules="rules"
      >
        <div style="display: flex; justify-content: center;">
          <div>
            <el-form-item
              label="名称："
              prop="name"
              autocomplete="off"
              :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]"
            >
              <el-input v-model="dynamicValidateForm.name"></el-input>
            </el-form-item>
            <el-form-item
              label="描述："
              prop="description"
              autocomplete="off"
              :rules="[{ required: true, message: '请输入描述', trigger: 'blur' }]"
            >
              <el-input v-model="dynamicValidateForm.description"></el-input>
            </el-form-item>
            <el-form-item
              prop="adminCount"
              label="后台数量："
              :rules="[{ required: true, message: '请输入后台数量', trigger: 'blur' }]"
            >
              <el-input v-model="dynamicValidateForm.adminCount"></el-input>
            </el-form-item>
          </div>
          <div style="margin-left: 30px;">
            <el-form-item
              label="创建时间："
              prop="createTime"
              autocomplete="off"
              :rules="[{ required: true, message: '请输入时间', trigger: 'blur' }]"
            >
              <el-date-picker
                v-model="dynamicValidateForm.createTime"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item
              label="状态："
              prop="status"
              autocomplete="off"
              :rules="[{ required: true, message: '状态不能为空', trigger: 'blur' }]"
            >
              <el-select v-model="value" :placeholder="dynamicValidateForm.status">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="排序："
              prop="sort"
              autocomplete="off"
              :rules="[{ required: true, message: '请输入序号', trigger: 'blur' }]"
            >
              <el-input v-model="dynamicValidateForm.sort"></el-input>
            </el-form-item>
          </div>
        </div>
        <el-form-item style="display: flex; justify-content: center;margin-top: 30px;">
          <el-button
            icon="el-icon-upload2"
            size="small"
            type="primary"
            @click="submitForm('dynamicValidateForm')"
          >提交</el-button>
          <el-button icon="el-icon-back" size="small" @click="resetForm()">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      value: "",
      options: [
        {
          value: 0,
          label: "禁用"
        },
        {
          value: 1,
          label: "启用"
        }
      ],
      dynamicValidateForm: {
        name: "", // 名称
        description: "", // 描述
        adminCount: "", // 后台数量
        createTime: "", // 创建时间
        sort: "", // 排序
        status: 0 // 状态
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var account = {
            id: this.$route.query.id,
            name: this.dynamicValidateForm.name,
            description: this.dynamicValidateForm.description,
            adminCount: this.dynamicValidateForm.adminCount,
            createTime: this.dynamicValidateForm.createTime,
            sort: this.dynamicValidateForm.sort,
            status: this.value
          };
          this.$store
            .dispatch("Batchdupdate", account)
            .then(data => {
              console.log("编辑成功：" + JSON.stringify(data));
              this.$message({
                type: "success",
                message: "编辑成功!"
              });
              this.$refs[formName].resetFields(); // 重置信息
            })
            .catch(error => {
              console.log("请求失败：" + error);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 返回上一级
    resetForm() {
      this.$router.replace({ name: "pageNotFound" });
    }
  },
  created() {
    this.id = this.$route.query.id;
    this.name = this.$route.query.name;
    var part = {
      id: this.$route.query.id
    };
    this.$store.dispatch("Partgetbyid", part).then(data => {
      console.log("用户信息：" + JSON.stringify(data.username));
      this.dynamicValidateForm.name = data.name;
      this.dynamicValidateForm.description = data.description;
      this.dynamicValidateForm.adminCount = data.adminCount;
      this.dynamicValidateForm.createTime = data.createTime;
      this.dynamicValidateForm.sort = data.sort;
      this.dynamicValidateForm.status = data.status;
      if (this.dynamicValidateForm.status == 1) {
        this.dynamicValidateForm.status = String("启用");
      } else if (this.dynamicValidateForm.status == 0) {
        this.dynamicValidateForm.status = String("禁用");
      }
    });
  },
  mounted() {}
};
</script>
<style scoped>
.modify-icon {
  display: flex;
  height: 50px;
  text-align: left;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
}
.modify-icon span {
  font-size: 14px;
}
.iconfont {
  margin-left: 15px;
  margin-right: 5px;
  font-size: 18px;
}
.modify-p {
  color: #6379bb;
  font-size: 14px;
  margin-left: 15px;
}
.modify-basic {
  margin-top: 20px;
}
</style>